<template>
    <div class="n-singer">
        <h3 class="nav-bar">
            <span class="title">入驻歌手</span>
            <router-link to="/discover/artist/signed" class="more">查看全部 ></router-link>
        </h3>
        <ul class="singer-list clear-block">
            <SingerItem v-for="(item, index) in singer_list" v-bind="{ ...item }"></SingerItem>
        </ul>

        <div class="apply-block">
            <router-link to="recruit" hidefocus="true" class="apply-btn apply-btn-bg">
                <i class="apply-btn-bg">申请成为网易音乐人</i>
            </router-link>
        </div>
    </div>
</template>
<script setup>
import SingerItem from './SingerItem.vue';
import singer_list from '@/json_data/singer_list.json'
</script>
<style lang="scss" scoped>
.n-singer {
    margin-top: 15px;

    .nav-bar {
        position: relative;
        height: 23px;
        margin: 0 20px;
        border-bottom: 1px solid #ccc;
        color: #333;

        .title {
            float: left;

        }

        .more {
            float: right;
            font-weight: normal;
            color: #666;
        }
    }

    .singer-list {
        margin: 6px 0 14px 20px;
    }

    .apply-block {

        .apply-btn,
        .apply-btn i {
            display: inline-block;
            height: 31px;
            line-height: 31px;
            overflow: hidden;
            vertical-align: top;
            text-align: center;


        }

        .apply-btn {
            margin-left: 20px;
            border-radius: 4px;
            color: #333;
            text-decoration: none;
            padding: 0 5px 0 0;
            white-space: nowrap;

            background-position: right -100px;

            &:hover {
                background-position: right -182px;
                i{
                    background-position: 0 -141px;
                }
            }

            &:active {
                background-position: right -264px;
                i{
                    background-position: 0 -223px;
                }
            }

            i {
                width: 170px;
                font-weight: bold;
                color: #333;
                background-position: 0 -59px;
                padding: 0 15px 0 20px;
                pointer-events: none;
            }

            &:hover {
                text-decoration: none;
            }
        }

    }
}
</style>